<template lang="html">
  <div class="backtop" v-show="showhide" ref="backtop" @click="clickBackTop">
    top
  </div>
</template>

<script>

export default {
	name:"backtop",
	data(){
		return{
           showhide:false
		}
	},
	mounted(){
		var that=this;
		window.addEventListener("scroll",function(){
          if(document.body.scrollTop || document.documentElement.scrollTop>window.screen.height/2){
             that.showhide=true
          }else{
          	that.showhide=false
          }
		})
		  // console.log(window.screen.height)
		  // console.log( document.documentElement.scrollTop)
		  // console.log(this.$refs.backtop.getBoundingClientRect().top)
	},
	methods:{
		clickBackTop(){
		   if(document.body.scrollTop){
			document.body.scrollTop=0
		   }else{
		   	 document.documentElement.scrollTop=0
		   }
		}
	}
}
</script>

<style lang="css" scoped>
.backtop{
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  color: #fff;
  background: #ccc;
  border-radius: 5px;
  position: fixed;
  right: 10px;
  bottom: 20px;
}
</style>
